<template>
  <!-- <div v-theme:column="'narrow'" id="show-blogs"> -->
  <div v-theme id="show-blogs">

    <el-row :gutter="20">
      <el-col :span="16">
        <el-input type="text" v-model="search" placeholder="搜索" clearable prefix-icon="el-icon-search"></el-input>
      </el-col>
      <el-col :span="8">
        <el-select v-model="cateSelected" placeholder="请选择分类" clearable>
          <el-option v-for="item in categories" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-col>
    </el-row>

    <!-- <h1>博客总览</h1>
    <input type="text" v-model="search" placeholder="搜索"> -->
    <!-- <div class="single-blog" v-for="blog in filteredBlogs" :key="blog.objectId">
      <router-link :to="'/blog/'+blog.objectId">
        <h2 v-rainbow>{{blog.title|to-uppercase}}</h2>
        <article style="word-wrap:break-word;">
          {{blog.content|snippet}}
        </article>
      </router-link>
    </div> -->

    <div class="single-blog" v-for="blog in filteredBlogs" :key="blog.objectId" v-loading="loading">
      <router-link :to="'/blog/'+blog.objectId">
        <el-card class="box-card">
          <div slot="header" class="clearfix" v-rainbow>
            <span>{{blog.title|to-uppercase}}</span>
          </div>
          <article style="word-wrap:break-word;">
            {{blog.content|snippet}}
          </article>
        </el-card>
      </router-link>
    </div>

  </div>
</template>


<script src="//cdn.jsdelivr.net/npm/leancloud-storage@4.0.0/dist/av-min.js"></script>
<script>
  import axios from 'axios'
  export default {
    name: 'show-blogs',
    data() {
      return {
        blogs: [],
        search: '',
        cateSelected: '',
        categories: ["vue.js", "es6", "network", "others"],
        loading: false,
      }
    },
    created() {
      this.loading = true;
      this.getBlogs();
    },
    methods: {
      async getBlogs() {

        const baseUrl = 'https://m7mqr0oh.lc-cn-n1-shared.com/1.1/'
        const header = {
          'x-avoscloud-application-id': 'm7MqR0ohghp4q78bJ5L2EstT-gzGzoHsz',
          'x-avoscloud-session-token': 'm7MqR0ohghp4q78bJ5L2EstT-gzGzoHsz',
          'x-avoscloud-application-key': 'ETEgD3OphCkHtbozcXn8IPBt'
        }

        await axios.get(baseUrl + "classes/blog", {
            headers: header
          })
          .then(function (data) {
            return data.data;
          })
          .then((data) => {

            this.blogs = data.results;

          })

        this.loading = false;
      }
    },
    computed: {
      filteredBlogs: function () {
        if (this.search) {
          return this.blogs.filter((blog) => {
            return blog.title.toLowerCase().match(this.search.toLowerCase())
          })
        } else if (this.cateSelected) {
          return this.blogs.filter((blog) => {
            return blog.categories.includes(this.cateSelected.toLowerCase())
          })
        } else {
          return this.blogs
        }


      }
    },
    filters: {
      toUppercase(value) {
        return value.toUpperCase();
      }
    },
    directives: {
      'rainbow': {
        bind(el, binding, vnode) {
          el.style.color = "#" + Math.random().toString(16).slice(2, 8);
        }
      }
    }
  }

</script>

<style>
  #show-blogs {
    padding-top: 100px;
    max-width: 800px;
    margin: 0 auto;
  }

  .single-blog {
    padding: 10px;
    margin: 20px 0;
    box-sizing: border-box;
    background-color: #eee;
    border: 1px dotted #aaa;
  }

  #show-blogs a {
    color: #444;
    text-decoration: none;
  }

  .el-row {
    display: flex;
    justify-content: space-around;
  }

  .el-select {
    width: 100%;
  }

</style>
